<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重邮点歌台</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link type="text/css" rel="stylesheet" href="./src/indexPage/css/main.css">
    <link type="text/css" rel="stylesheet" href="./src/indexPage/css/animsition.min.css">
    <link type="text/css" rel="stylesheet" href="./src/indexPage/css/idangerous.swiper.css">

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script>
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wx32b4f4d18f99edc4', // 必填，公众号的唯一标识
            timestamp:timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串na
            signature: signature,// 必填，签名，见附录1
            jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone','onMenuShareWeibo'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });

        wx.ready(function(){
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: shareTitle, // 分享标题
                link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '', // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            //分享给朋友
            wx.onMenuShareAppMessage({
                title: shareTitle, // 分享标题
                desc: '', // 分享描述
                link: shareLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: '', // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {

                },
                cancel: function () {

                }
            });


            //分享到QQ
            wx.onMenuShareQQ({
                title: shareTitle, // 分享标题
                desc: '', // 分享描述
                link: shareLink, // 分享链接
                imgUrl: '', // 分享图标
                success: function () {

                },
                cancel: function () {

                }
            });

            //分享到腾讯微博
            wx.onMenuShareWeibo({
                title: shareTitle, // 分享标题
                desc: '', // 分享描述
                link: shareLink, // 分享链接
                imgUrl: '', // 分享图标
                success: function () {

                },
                cancel: function () {

                }
            });

            //分享到QQ空间
            wx.onMenuShareQZone({
                title: shareTitle, // 分享标题
                desc: '', // 分享描述
                link: shareLink, // 分享链接
                imgUrl: '', // 分享图标
                success: function () {

                },
                cancel: function () {

                }
            });



        });
    </script>
</head>
<body>

<div class="animsition">
    <div class="main" id="main">
        <header>
            <div id="main-title"><a href="" class="animsition-link"><img src="./src/indexPage/img/icon.png" alt=""><span>重邮点歌台</span></a><a href="./src/accountInfoPage/accountPage.html" class="animsition-link"><img src="./src/indexPage/img/headIcon.png" alt=""></a></div>
            <div id="main-tab">
                <div class="tabs">
                    <a href="javascript:void(0)"  class="active">最新动态</a>
                    <a href="javascript:void(0)" >热门互动</a>
                    <a href="javascript:void(0)" >往期回顾</a>
                </div>
                <div id="slider-underline"></div>
            </div>
        </header>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="content-slide">
                        </div>
                </div>
                <div class="swiper-slide">
                    <div class="content-slide">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="content-slide">
                 <!--       <div class="song-order">
                            <div class="order-content">
                                <div>
                                    你的背包-陈奕迅
                                </div>
                                <div>送给:隔壁家的小王啊</div>
                                <div>是非成败转头空，青山依旧在惯看是非成败转头空，青山依旧在惯看是非成败转头空，青山依旧在惯看是非成败转头空，青山依旧在惯看</div>
                                <div>2018-3-30 16 : 06</div>
                            </div>
                            <div class="order-info">
                                <div>来自：</div>
                                <div class="triangle"></div>
                                <div class="order-img">
                                    <img src="./src/indexPage/img/defaultHead.png" alt="">
                                </div>
                                <div>谭光明小朋友</div>
                                <div class="like">
                                    <img class="like-img" src="./src/indexPage/img/like.png" alt="">
                                    <span>1330</span>
                                </div>
                            </div>
                        </div>-->

                     <!--   <div class="load-container">
                            <div class="loading">
                                <p>加载更多...</p>
                                <span class="loadAnimation">
                                <li class="loadItem1 loadItem"></li>
                                <li class="loadItem2 loadItem"></li>
                                <li class="loadItem3 loadItem"></li>
                            </span>
                            </div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
        <a href="./src/orderPage/orderPage.html" id="orderButton" class="animsition-link">点歌</a>
    </div>

</div>


<script type="text/javascript" src="src/commonJs/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="src/commonJs/jquery.animsition.min.js"></script>
<script type="text/javascript" src="src/commonJs/idangerous.swiper.min.js"></script>
<script src="./src/commonJs/dragFresh.js"></script>
<script>
    $("#main").height(window.innerHeight);
    $("#slider-underline")[0].style.left=$(".tabs>a.active").offset().left+"px";
    var contentSlide=$(".content-slide");
    freshData(contentSlide[0],1);
    freshData(contentSlide[1],2);
    freshData(contentSlide[2],3);
    $(document).ready(function() {

        $(".animsition").animsition({

            inClass               :   'zoom-in-sm',
            outClass              :   'zoom-out-sm',
            inDuration            :    400,
            outDuration           :    400,
            linkElement           :   '.animsition-link',
            // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
            loading               :    true,
            loadingParentElement  :   'body', //animsition wrapper element
            loadingClass          :   'animsition-loading',
            unSupportCss          : [ 'animation-duration',
                '-webkit-animation-duration',
                '-o-animation-duration'
            ],
            //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
            //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

            overlay               :   false,

            overlayClass          :   'animsition-overlay-slide',
            overlayParentElement  :   'body'
        });
    });

    targetSlider.on("click", ".order-content", function () {
        var nextDiv = $(this).next()
        if ($(this).hasClass("zoomup") == false) {
            $(this).toggleClass("zoomup", true);
            nextDiv.hide();
            $(this).children().eq(3).children().eq(1).show();
        } else {
            $(this).children().eq(3).children().eq(1).hide();
            $(this).toggleClass("zoomup", false);
            var t2 = setTimeout(function () {
                nextDiv.show();
                clearTimeout(t2);
            }, 300);
        }
    });

    targetSlider.on("click", ".like>img", function () {
        var img = $(this);
        if (img.hasClass("choose") === false) {
            img.toggleClass("choose", true);
            img.prop("src", "./src/indexPage/img/likeChoose.png");
            img.next().text(parseInt(img.next().text())+1);
        }
        else {
            img.toggleClass("choose", false);
            img.prop("src", "./src/indexPage/img/like.png");
            img.next().text(parseInt(img.next().text())-1);
        }
    });

    function freshData(obj,index) {
        if (index === 1)
            $.get("./src/data/data.json", "freshEarliestData", function (data) {
            var content = $(obj);
            var noticeInfo="<div class=\"infor\">\n" +
                "                            <div class=\"infor-top\">\n" +
                "                                <a href=\"#\">公告</a>\n" +
                "                                <img src=\"./src/indexPage/img/noticeIcon.png\">\n" +
                "                                <span>2018-9-16</span>\n" +
                "                            </div>\n" +
                "                            <div>\n" +
                "                                <h2>今日点歌</h2>\n" +
                "                                <p>是非成败转头空，青山依旧在，惯看秋月春风。一壶浊酒喜相逢，古今多少事，滚滚长江东逝水，浪花淘尽英雄。 几度夕阳红。白发渔樵江渚上，都付笑谈中。</p>\n" +
                "                                <p>青山依旧在，惯看秋月春风。一壶浊酒喜相逢，古今多少事，滚滚长江东逝水，浪花淘尽英雄。 几度夕阳红</p>\n" +
                "                            </div>\n" +
                "                        </div>"
            content.append(noticeInfo);
            for (var i = 0; i < data.length; i++) {
                var orderItem = $("<div class=\"song-order\">\n" +
                    "                        <div class=\"order-content\">\n" +
                    "                            <div></div>\n" +
                    "                            <div></div>\n" +
                    "                            <div></div>\n" +
                    "                            <div><span></span><span></span></div>\n" +
                    "                        </div>\n" +
                    "                        <div class=\"order-info\">\n" +
                    "                            <div>来自:</div>\n" +
                    "                            <div class=\"triangle\"></div>\n" +
                    "                            <div class=\"order-img\">\n" +
                    "                                <img src=\"./src/indexPage/img/defaultHead.png\" alt=\"\">\n" +
                    "                            </div>\n" +
                    "                            <div></div>\n" +
                    "                            <div class=\"like\"><img class=\"like-img\" src=\"./src/indexPage/img/like.png\" alt=\"\">" +
                    "<span></span></div>\n" +
                    "                        </div>\n" +
                    "                    </div>");
                var orderContent = orderItem.children().children();
                orderContent.eq(0).text(data[i].songAndSinger);
                orderContent.eq(1).text("送给:" + data[i].orderTo);
                orderContent.eq(2).text(data[i].blessing);
                orderContent.eq(3).children().eq(0).text(data[i].dateTime);
                orderContent.eq(3).children().eq(1).text("来自:"+data[i].orderedMan);
                orderContent.eq(3).children().eq(1).hide();
                var orderInfo = orderItem.children().eq(1).children();
                orderInfo.eq(3).text(data[i].orderedMan);
                orderInfo.eq(4).children().eq(1).text(data[i].likes);
                if (data[i].beLike == "yes") {
                    var img = orderInfo.eq(4).children();
                    img.toggleClass("choose", true);
                    img.prop("src", "./src/indexPage/img/likeChoose.png");
                }
                content.append(orderItem);
            }
            var loadingItem = $(" <div class=\"load-container\">\n" +
                "                        <div class=\"loading\">\n" +
                "                    <p>正在加载</p>\n" +
                "                    <span class=\"loadAnimation\">\n" +
                "                        <li class=\"loadItem1 loadItem\"></li>\n" +
                "                        <li class=\"loadItem2 loadItem\"></li>\n" +
                "                        <li class=\"loadItem3 loadItem\"></li>\n" +
                "                    </span>\n" +
                "                </div>");
            content.append(loadingItem)
        }, "JSON");
        else if (index === 2)
            $.get("./src/data/data.json", "freshHotData", function (data) {
                var content = $(obj);
                for (var i = 0; i < data.length; i++) {
                    var orderItem = $("<div class=\"song-order\">\n" +
                        "                        <div class=\"order-content\">\n" +
                        "                            <div></div>\n" +
                        "                            <div></div>\n" +
                        "                            <div></div>\n" +
                        "                            <div><span></span><span></span></div>\n" +
                        "                        </div>\n" +
                        "                        <div class=\"order-info\">\n" +
                        "                            <div>来自:</div>\n" +
                        "                            <div class=\"triangle\"></div>\n" +
                        "                            <div class=\"order-img\">\n" +
                        "                                <img src=\"./src/indexPage/img/defaultHead.png\" alt=\"\">\n" +
                        "                            </div>\n" +
                        "                            <div></div>\n" +
                        "                            <div class=\"like\"><img class=\"like-img\" src=\"./src/indexPage/img/like.png\" alt=\"\">" +
                        "<span></span></div>\n" +
                        "                        </div>\n" +
                        "                    </div>");
                    var orderContent = orderItem.children().children();
                    orderContent.eq(0).text(data[i].songAndSinger);
                    orderContent.eq(1).text("送给:" + data[i].orderTo);
                    orderContent.eq(2).text(data[i].blessing);
                    orderContent.eq(3).children().eq(0).text(data[i].dateTime);
                    orderContent.eq(3).children().eq(1).text("来自:"+data[i].orderedMan);
                    orderContent.eq(3).children().eq(1).hide();
                    var orderInfo = orderItem.children().eq(1).children();
                    orderInfo.eq(3).text(data[i].orderedMan);
                    orderInfo.eq(4).children().eq(1).text(data[i].likes);
                    if (data[i].beLike == "yes") {
                        var img = orderInfo.eq(4).children();
                        img.toggleClass("choose", true);
                        img.prop("src", "./src/indexPage/img/likeChoose.png");
                    }
                    content.append(orderItem);
                }
                var loadingItem = $(" <div class=\"load-container\">\n" +
                    "                        <div class=\"loading\">\n" +
                    "                    <p>正在加载</p>\n" +
                    "                    <span class=\"loadAnimation\">\n" +
                    "                        <li class=\"loadItem1 loadItem\"></li>\n" +
                    "                        <li class=\"loadItem2 loadItem\"></li>\n" +
                    "                        <li class=\"loadItem3 loadItem\"></li>\n" +
                    "                    </span>\n" +
                    "                </div>");
                content.append(loadingItem)
            }, "JSON");
        else if (index ===3)
            $.get("./src/data/notice.json", "freshNoticeData", function (data) {
                var content = $(obj);

                for (var i = 0; i < data.length; i++) {
                    var noticeItem=$("<div class=\"infor\">\n" +
                        "                            <div class=\"infor-top\">\n" +
                        "                                <a href=\"#\">公告</a>\n" +
                        "                                <img src=\"./src/indexPage/img/noticeIcon.png\">\n" +
                        "                                <span>2018-9-16</span>\n" +
                        "                            </div>\n" +
                        "                            <div>\n" +
                        "                                <h2>今日点歌</h2>\n" +
                        "                                <p>是非成败转头空，青山依旧在，惯看秋月春风。一壶浊酒喜相逢，古今多少事，滚滚长江东逝水，浪花淘尽英雄。 几度夕阳红。白发渔樵江渚上，都付笑谈中。青山依旧在，惯看秋月春风。一壶浊酒喜相逢，古今多少事，滚滚长江东逝水，浪花淘尽英雄。 几度夕阳红</p>\n" +
                        "                            </div>\n" +
                        "                        </div>");
                    noticeItem.children().eq(0).children().eq(0).text(data[i].type);
                    noticeItem.children().eq(0).children().eq(2).text(data[i].datetime);
                    noticeItem.children().eq(1).children().eq(0).text(data[i].title);
                    noticeItem.children().eq(1).children().eq(1).text(data[i].p);
                    content.append(noticeItem);
                }
                var loadingItem = $(" <div class=\"load-container\">\n" +
                    "                        <div class=\"loading\">\n" +
                    "                    <p>正在加载</p>\n" +
                    "                    <span class=\"loadAnimation\">\n" +
                    "                        <li class=\"loadItem1 loadItem\"></li>\n" +
                    "                        <li class=\"loadItem2 loadItem\"></li>\n" +
                    "                        <li class=\"loadItem3 loadItem\"></li>\n" +
                    "                    </span>\n" +
                    "                </div>");
                content.append(loadingItem)
            }, "JSON");
    }

    function moreData(obj) {
        $.get("./src/data/data.json", "getOrderHistoryData", function (data) {
            var content = obj;
            for (var i = 0; i < data.length; i++) {
                var orderItem = $("<div class=\"song-order\">\n" +
                    "                        <div class=\"order-content\">\n" +
                    "                            <div></div>\n" +
                    "                            <div></div>\n" +
                    "                            <div></div>\n" +
                    "                            <div><span></span><span></span></div>\n" +
                    "                        </div>\n" +
                    "                        <div class=\"order-info\">\n" +
                    "                            <div>来自:</div>\n" +
                    "                            <div class=\"triangle\"></div>\n" +
                    "                            <div class=\"order-img\">\n" +
                    "                                <img src=\"./src/indexPage/img/defaultHead.png\" alt=\"\">\n" +
                    "                            </div>\n" +
                    "                            <div></div>\n" +
                    "                            <div class=\"like\"><img class=\"like-img\" src=\"./src/indexPage/img/like.png\" alt=\"\">" +
                    "<span></span></div>\n" +
                    "                        </div>\n" +
                    "                    </div>");
                var orderContent = orderItem.children().children();
                orderContent.eq(0).text(data[i].songAndSinger);
                orderContent.eq(1).text("送给:" + data[i].orderTo);
                orderContent.eq(2).text(data[i].blessing);
                orderContent.eq(3).children().eq(0).text(data[i].dateTime);
                orderContent.eq(3).children().eq(1).text("来自:"+data[i].orderedMan);
                orderContent.eq(3).children().eq(1).hide();
                var orderInfo = orderItem.children().eq(1).children();
                orderInfo.eq(3).text(data[i].orderedMan);
                orderInfo.eq(4).children().eq(1).text(data[i].likes);
                if (data[i].beLike == "yes") {
                    var img = orderInfo.eq(4).children();
                    img.toggleClass("choose", true);
                    img.prop("src", "./src/indexPage/img/likeChoose.png");
                }

                content.append(orderItem);
                /*  var loadingItem=$(" <div class=\"load-container\">\n" +
                      "                        <div class=\"loading\">\n" +
                      "                    <p>正在加载</p>\n" +
                      "                    <span class=\"loadAnimation\">\n" +
                      "                        <li class=\"loadItem1 loadItem\"></li>\n" +
                      "                        <li class=\"loadItem2 loadItem\"></li>\n" +
                      "                        <li class=\"loadItem3 loadItem\"></li>\n" +
                      "                    </span>\n" +
                      "                </div>");*/
            }
            var loadContainer = content.children(".load-container").detach();
            content.append(loadContainer);
            var loading = content.children(".load-container").children();
            loading.children("p").text("加载更多...");
            loading.children("span").toggleClass("load-active", false);
        }, "JSON")
    }

</script>

<script type="text/javascript">
    var tabsSwiper = new Swiper('.swiper-container',{
        speed:500,
        onSlideChangeStart: function(){
            $(".tabs .active").removeClass('active');
            $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active');
            $("#slider-underline")[0].style.left=$(".tabs>a.active").offset().left+"px";
        }
    });
    $(".tabs a").on('click',function(){
        $(".tabs .active").removeClass('active');
        $(this).addClass('active');
        tabsSwiper.swipeTo($(this).index());
    });
/*    $(".tabs a").click(function(){
    });*/
</script>
</body>
</html>